<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入你的评论内容（最多120字）" maxlength="120" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in list" :key="item.id">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user}}&nbsp;&nbsp;{{item.time | dateFormat}}
                </div>
                <div class="cmt-body">
                {{item.com}}
                </div>
            </div>
            
        </div>


        <mt-button type="danger" size="large" plain @click="getMore">加载更多 </mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
    data(){
        return {
            list:[
                {user:'匿名用户', time:new Date(),com:'一楼，一楼，沙发，沙发',id:'1'},
                {user:'匿名用户', time:new Date(),com:'二楼，二楼，沙发，沙发',id:'2'},
                {user:'匿名用户', time:new Date(),com:'三楼，三楼，沙发，沙发',id:'3'},
                {user:'匿名用户', time:new Date(),com:'四楼，四楼，沙发，沙发',id:'4'},
                {user:'匿名用户', time:new Date(),com:'五楼，五楼，沙发，沙发',id:'5'},
                {user:'匿名用户', time:new Date(),com:'六楼，六楼，沙发，沙发',id:'6'},
                {user:'匿名用户', time:new Date(),com:'七楼，七楼，沙发，沙发',id:'7'},
                {user:'匿名用户', time:new Date(),com:'八楼，八楼，沙发，沙发',id:'8'},
                {user:'匿名用户', time:new Date(),com:'九楼，九楼，沙发，沙发',id:'9'},
                {user:'匿名用户', time:new Date(),com:'十楼，十楼，沙发，沙发',id:'10'},
                {user:'匿名用户', time:new Date(),com:'十一楼，十一楼，沙发，沙发',id:'11'},
                {user:'匿名用户', time:new Date(),com:'十二楼，十二楼，沙发，沙发',id:'12'},
                {user:'匿名用户', time:new Date(),com:'十三楼，十三楼，沙发，沙发',id:'13'},
                {user:'匿名用户', time:new Date(),com:'十四楼，十四楼，沙发，沙发',id:'14'},
                {user:'匿名用户', time:new Date(),com:'十五楼，十五楼，沙发，沙发',id:'15'},
                {user:'匿名用户', time:new Date(),com:'十六楼，十六楼，沙发，沙发',id:'16'}
            ],
            pageIndex:1, //默认展示第一页数据
            num:5,//自定的每次请求的条数
            start:[],//显示数据的量
           
           
           msg:""//评论输入的内容
        }
    },
    methods:{
        getMore(){
            this.start=this.pageIndex*this.num
            this.pageIndex++;
            //console.log(this.list.slice(0,this.start))
          
             
        },
        postComment(){
            //校验是否为空的内容
            if(this.msg.trim().length===0){
                return Toast("评论不能为空！")
            }
           this.list.unshift({
            user: '匿名用户',
            time:Date.now(),
            com:this.msg,
            });
            this.msg=""

        }
    },
    props:["id"]
}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin:0;
    }
    .cmt-list{
        margin:5px 0;
        .cmt-item{
            font-size:13px;
            .cmt-title{
                line-height: 30px;
                background-color: #ccc;
            }
            .cmt-body{
                line-height: 35px;
                text-indent:2em;
            }
        }
    }
}
</style>